import { Component } from "react";
import Taro from "@tarojs/taro";
import { View, Input, Image } from "@tarojs/components";
import i18n from "i18n-js";
import { GButton } from "@/components/GButton";
import languageModel from "@/models/language";
import IconInput from "@/components/IconInput";
import CountryPicker, { defaultCountryCode } from '@/components/CountryPicker';
import { DynamicColors, GStyleSheet } from "@/utils/DarkMode";
import PageContainer from "@/components/PageContainer";
import { sendShareDevicesNoti } from '@/services/share'
import deviceShareModel from '@/models/deviceShare'
import Toast from "@/utils/Toast";
import regular from '@/utils/regular';


const dstyle = GStyleSheet.create({
  page: {
    backgroundColor: DynamicColors.normalBackgroundColor
  },
  container: {
    display: 'flex',
    height: '100%',
    flexDirection: 'column',
  },
  content: {
    // flex: 1,
    paddingLeft: '10%',
    paddingRight: '10%',
    marginTop: 20,
  },
  inputView: {
    borderWidth: 1,
    borderColor: DynamicColors.borderBottomColor,
    padding: 10,
    borderStyle: 'solid',
    marginTop: 20
  }
});

class BindPhone extends Component {

  state = {
    phoneCode: languageModel.phoneCode ?? defaultCountryCode,
    phone: '',
  }


  onConfirm = async () => {
    const { phone, phoneCode } = this.state;
    Toast.loading('');
    const isPhone = regular.phone.test(phone);
    const res = await sendShareDevicesNoti({
      data: deviceShareModel.getSelectedDevices(),
      account: isPhone ? `${phoneCode}${phone}` : phone
    });
    Toast.hideLoading();
    if (res.success) {
      Toast.success(i18n.t('INVITE_SUCCESS'));
      setTimeout(() => {
        Taro.navigateBack()
      }, 500);
    } else if (res.code === 1000000) {
      Toast.error(i18n.t('ACCOUNT_NOT_REGISTER'));
    } else if (res.code === 2000069) {
      Toast.error(i18n.t('CAN_NOT_SHARE_SELF'));
    } else {
      Toast.error(res.message ?? i18n.t('INVITE_ERROR'));
    }
  };

  changePhone = (e) => {
    this.setState({ phone: e.detail.value })
  }

  render() {
    const styles = dstyle.style;
    const { phone } = this.state;
    const isValidAccount = regular.phoneAndEmail.test(phone);

    return (
      <PageContainer title={i18n.t('ACCOUNT_SHARE')} style={styles.page}>
        <View style={styles.container}>
          <View style={styles.content}>
            <CountryPicker />
            <View style={styles.inputView}>
              <Input
                value={phone}
                placeholder={i18n.t('ENTER_PHONE_AND_EMAIL_TIPS')}
                onInput={this.changePhone}
              />
            </View>
          </View>
          <View style={{ marginTop: 30, marginBottom: 30, height: 80, width: '100%' }}>
            <GButton
              text={i18n.t("SEND_SHARE")}
              onPress={this.onConfirm}
              style={{ borderRadius: 99 }}
              disabled={!isValidAccount}
            />
          </View>
        </View>
      </PageContainer>
    );
  }
}

export default BindPhone;
